<template>
  <div class="page appraisal-page">
    <nav-bar :title="title" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-cell
        title-class="van-cell__title_gray"
        value-class="van-cell__value_black"
        size="large"
        title="考核名称"
        :value="assessmentData.assessmentName"
      />
      <div class="require-method-title">
        <p>绩效考核办法：</p>
      </div>
      <div class="require-method">
        <p class="require-method-content" v-html="assessmentData.assessmentDetail">
          {{ assessmentData.assessmentDetail }}
        </p>
      </div>
      <div class="require-method-title">
        <p>绩效考核内容：</p>
      </div>
      <div class="table-list">
        <div class="table-list-head">
          <van-row>
            <van-col :span="7">考核项目</van-col>
            <van-col :span="11" align="center">考核要求</van-col>
            <van-col :span="6" align="center">项目分值</van-col>
          </van-row>
        </div>
        <template v-if="requireData.length">
          <div v-for="(item, key) in requireData" :key="key">
            <div class="table-list-row" :class="key % 2 ? 'table-list-row__even' : 'table-list-row__odd'">
              <van-row type="flex">
                <van-col :span="7" @click="changeRole(item, key)">
                  <p class="van-ellipsis" :class="item.show ? 'color2' : 'color1'">{{ item.assessmentProjectName }}</p>
                </van-col>
                <van-col :span="11">
                  <p class="van-ellipsis table-list-row__center">{{ item.requirement }}</p>
                </van-col>
                <van-col :span="6" align="center">
                  <p class="van-ellipsis table-list-row__center">{{ item.score }}分</p>
                </van-col>
              </van-row>
            </div>
            <transition name="van-fade">
              <div class="table-list-rule" v-show="item.show">
                <p class="table-list-rule__text">
                  扣分规则：
                  <span>{{ item.deductionRule }}</span>
                </p>
                <p class="table-list-rule__text">
                  内容说明：
                  <span>{{ item.contentDescription }}</span>
                </p>
              </div>
            </transition>
          </div>
        </template>
        <template v-else>
          <div class="table-list-row table-list-row__old">
            <van-row type="flex">
              <van-col :span="24"><div class="table-list-row__nodata">暂无数据</div></van-col>
            </van-row>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import Routine from '@/api/routine'
export default {
  data() {
    return {
      title: '绩效考核',
      roleFlag: false,
      gridCode: '',
      assessmentData: {},
      requireData: [
        {
          name: '事件上报',
          content: '每日最少上报3条事件',
          num: '20分',
          text: '不足一条扣0.1分，扣完为止',
          text1: '网格员每日需上报至少3条事件',
          show: false
        },
        {
          name: '事件上报',
          content: '每日最少上报3条事件',
          num: '20分',
          text: '不足一条扣0.1分，扣完为止',
          text1: '网格员每日需上报至少3条事件',
          show: false
        },
        {
          name: '事件上报',
          content: '每日最少上报3条事件',
          num: '20分',
          text: '不足一条扣0.1分，扣完为止',
          text1: '网格员每日需上报至少3条事件',
          show: false
        }
      ]
    }
  },
  created() {
    this.getAppraisal()
  },
  mounted() {},
  methods: {
    changeRole(item, key) {
      this.$set(this.requireData[key], 'show', !item.show)
    },
    getAppraisal() {
      Routine.Appraisal.assessment({
        type: 1
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          const assessmentCorrections = res.data.data.assessmentCorrections
          if (assessmentCorrections.length > 0) {
            for (var i = 0; i < assessmentCorrections.length; i++) {
              assessmentCorrections[i].show = false
            }
          }
          this.assessmentData = data
          this.requireData = res.data.data.assessmentCorrections
          // if (this.requireData.length > 0) {
          //   for (var i = 0; i < this.requireData.length; i++) {
          //     this.requireData[i].show = false
          //   }
          // }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/table.less';
@import '~@/assets/style/routine/appraisal/requirement.less';
</style>
